<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航条</title>
</head>
<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  .nav{
    list-style: none;
    background-color: #6495ed;
    width: 800px;
    margin: 50px auto;
    overflow: hidden;/* 解决高度塌陷 */

  }
  .nav li{
    float: left;
    width: 25%;
  }
  .nav a{
  /*  转换为块元素*/
    display: inline-block;
    width: 100%;
  /*  设置文字居中*/
    text-align: center;
    padding: 5px 0;
  /*  去除下划线*/
    text-decoration: none;
    color: white;
    font-weight: bold;
  }
  .nav a:hover{
    background-color: indianred;
  }
</style>
<body>
    <ul class="nav">
      <li><a href="#">首页</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">联系</a></li>
      <li><a href="#">关于</a></li>
    </ul>
</body>
</html>